<template>
  <div id="map" style="width: 100%; height: 100%"></div>
</template>

<script>
import 'mapbox-gl/dist/mapbox-gl.css'
import mapboxgl from 'mapbox-gl'
import {
  INITIAL_MAP_VIEW_STATE,
  MAP_CONTAINER_STYLE,
  MAP_CONTAINER_STYLE__DARK,
  COUNTRY_MAP_STYLE__DARK,
  MIN_MAP_ZOOM,
  MAX_MAP_ZOOM,
  REACT_APP_MAPBOX_TOKEN,
  MAP_SOURCE_COUNTRY_TILESET,
  MAP_LAYER_TILESET_ID
} from '@/constants/map.js'

const sourceId = 'countries'
const layerId = 'country-fills'
mapboxgl.accessToken = REACT_APP_MAPBOX_TOKEN

export default {
  name: 'Map',
  props: {
    can: {
      type: Array,
      default: () => {
        return ['Singapore']
      }
    },
    zoom: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
      this._map = new mapboxgl.Map({
        container: 'map', // container id
        ...INITIAL_MAP_VIEW_STATE,
        zoom: this.zoom,
        style: 'mapbox://styles/antbit/cluyks0jk004701qrfzf413s2',
        minZoom: MIN_MAP_ZOOM,
        scrollZoom: false, // 禁用滚轮缩放
        maxZoom: MAX_MAP_ZOOM,
        // 去掉地图缩放按钮
        interactive: true,
        attributionControl: false,
        preserveDrawingBuffer: false,
        logo: false
      })
      this._map.on('click', (e) => {
        console.log('click', e)
        const features = this._map.queryRenderedFeatures(e.point, {
          layers: [layerId]
        })
        if (features.length) {
          const clickedCountryCode = features[0]?.properties?.ISO_A2_EH
          const clickedCountryName = features[0]?.properties?.NAME
          console.log('Clicked country code:', clickedCountryCode)
          console.log('Clicked country name:', clickedCountryName)
          this.setCountryColor(clickedCountryCode, clickedCountryName)
        }
      })

      this._map.on('load', () => {
        this._map.addSource(sourceId, {
          type: 'vector',
          url: MAP_SOURCE_COUNTRY_TILESET
        })
        this._map.addLayer({
          id: layerId,
          type: 'fill',
          source: sourceId,
          'source-layer': MAP_LAYER_TILESET_ID,
          paint: {
            'fill-color': '#1f1f1f',
            'fill-outline-color': 'black'
          }
        })
        this._map.addLayer({
          id: 'country-border',
          type: 'line',
          source: sourceId,
          'source-layer': MAP_LAYER_TILESET_ID,
          paint: {
            'line-color': '#000000',
            'line-width': 0.7
          }
        })
        this.setCountryColor('SG', 'Singapore')
      })
    },
    // 根据点击的国家，设置当前国家的颜色
    setCountryColor(countryCode, countryName) {
      console.log('countryCode', countryCode, countryName)
      console.log('this.can', this.can)
      if (this.can.includes(countryName)) {
        this._map.setPaintProperty(layerId, 'fill-color', [
          'case',
          ['==', ['get', 'ISO_A2_EH'], countryCode],
          '#0372F3', // 设置点击国家的颜色
          '#1f1f1f' // 默认颜色
        ])
      }
      this.$emit('countryClick', {
        countryCode: countryCode,
        countryName: countryName
      })
    }
  }
}
</script>

<style lang="scss" scoped>
:deep() {
  .mapboxgl-ctrl .mapboxgl-ctrl-logo {
    display: none;
  }
}
</style>
